<template>

    <!---v-on主要做得事情 是对所有得事件进行绑定-->
    <p>购物数量是：{{ count }}</p>
    <button v-on:click="count= count + 1">点击增加购物量</button>
     <button @click="countValue">点击对购物量 - 1</button>
    <button @click="count = count + 5">购物量最少5件东西</button>
    <button @click="countFn(5)">购物量最少5件东西</button>
    <p>-------------------翻转字符串-------------------------</p>
    <span>{{ msg }}</span> <br>

    <button @click="btn">点击翻转字符</button>


</template>
<script setup>
import { ref } from 'vue';

//直接赋值 是没有响应式得
let count = ref(0)
const msg=ref("hello vue")

const btn = () => { 
    //第一步 需要拆分字母
    //第二步 翻转
    // 第三步 拼接
    console.log(msg.value.split('').reverse()); 
   msg.value= msg.value.split('').reverse().join('')
}


const countValue = () => {
    count.value --
}

const countFn = (num) => { 
    count.value += num
}
</script>